<template>
  <el-row style="height: 100%">
    <el-col
        v-show="!isPreview"
        :span="isSet ? 24 : 12"
        :class="{ zindex11: isOpenAdd, SetGridEdit: true }"
        style="height: 100%"
    >
      <el-tooltip effect="dark" :content="isSet ? '取消展开' : '展开'" placement="left">
        <el-icon
            class="float-button-set"
            @click="
            () => {
              isSet = !isSet
              if (isSet) {
                isPreview = false
              }
            }
          "
        ><component :is="isSet ? 'Fold' : 'Expand'"
        /></el-icon>
      </el-tooltip>
      <el-tooltip effect="dark" :content="'重新加载预览页面,当前更改 ' + updateNum" placement="top">
        <el-badge :value="updateNum" :max="99" :hidden="updateNum === 0" class="refresh-button">
          <el-icon
              @click="
              () => {
                gridPreviewKey++
                updateNum = 0
              }
            "
          ><Refresh
          /></el-icon>
        </el-badge>
      </el-tooltip>
      <el-form :inline="true" style="margin-left: 90px" size="small">
        <el-form-item>
          <el-button @click="edit()" size="small" type="primary">保存</el-button>
        </el-form-item>

        <el-form-item>
          <el-popconfirm
              class="box-item"
              title="确定初始化当前网格所有配置?"
              @confirm="initialize()"
              placement="bottom"
          >
            <template #reference>
              <el-button size="small" type="primary">重新初始化</el-button></template
            >
          </el-popconfirm>
        </el-form-item>
        <el-form-item>
          <el-button @click="codeMode = !codeMode" size="small" type="primary">{{
              codeMode ? '回到配置' : '查看源码'
            }}</el-button>
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName" tab-position="left" @tab-click="handleTabClick" v-if="isShow">
        <el-tab-pane label="GRID" name="GRID">
          <GridEdit
              v-if="tabState.GRID"
              v-show="!codeMode"
              v-model="datas.tableJson"
              :fieldJson="datas.fieldJson"
              :queryJson="datas.queryJson"
          />
          <JsonEditView class="json800px" v-if="codeMode" v-model="datas.tableJson" />
        </el-tab-pane>
        <el-tab-pane label="FIELD" name="FIELD">
          <FieldView v-if="tabState.FIELD" v-show="!codeMode" v-model="datas.fieldJson" />
          <JsonEditView class="json800px" v-if="codeMode" v-model="datas.fieldJson" />
        </el-tab-pane>
        <el-tab-pane label="ADD" name="ADD">
          <AddView
              v-if="tabState.ADD"
              v-show="!codeMode"
              v-model="datas.addJson"
              :fieldJson="datas.fieldJson"
              :editJson="datas.editJson"
              :importJson="datas.importJson" />
          <JsonEditView class="json800px" v-if="codeMode" v-model="datas.addJson"
          /></el-tab-pane>
        <el-tab-pane label="EDIT" name="EDIT">
          <EditView
              v-if="tabState.EDIT"
              v-show="!codeMode"
              v-model="datas.editJson"
              :fieldJson="datas.fieldJson" />
          <JsonEditView class="json800px" v-if="codeMode" v-model="datas.editJson"
          /></el-tab-pane>
        <el-tab-pane label="QUERY" name="QUERY">
          <QueryView
              v-if="tabState.QUERY"
              v-show="!codeMode"
              v-model="datas.queryJson"
              :fieldJson="datas.fieldJson" />
          <JsonEditView class="json800px" v-if="codeMode" v-model="datas.queryJson"
          /></el-tab-pane>
        <el-tab-pane label="IMPORT" name="IMPORT">
          <ImportView
              v-if="tabState.IMPORT"
              v-show="!codeMode"
              v-model="datas.importJson"
              :fieldJson="datas.fieldJson" />
          <JsonEditView class="json800px" v-if="codeMode" v-model="datas.importJson"
          /></el-tab-pane>
        <el-tab-pane label="EXPORT" name="EXPORT">
          <ExportView
              v-if="tabState.EXPORT"
              v-show="!codeMode"
              v-model="datas.exportJson"
              :fieldJson="datas.fieldJson" />
          <JsonEditView class="json800px" v-if="codeMode" v-model="datas.exportJson"
          /></el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col v-show="!isSet" :span="isPreview ? 24 : 12" class="Preview">
      <el-tooltip effect="dark" :content="isPreview ? '取消预览' : '预览'" placement="left">
        <el-icon
            class="float-button"
            @click="
            () => {
              isPreview = !isPreview
              if (isPreview) {
                isSet = false
              }
            }
          "
        ><component :is="isPreview ? 'Expand' : 'Fold'"
        /></el-icon>
      </el-tooltip>
      <!--网格预览 readonly 数据只读传输，不允许预览界面修改配置-->
      <GridPreviewView
          v-if="isShow"
          :setGrid="true"
          :key="gridPreviewKey"
          :gridJson="readonly(datas)"
          :isPreview
          style="height: 100%"
      />
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, provide, onBeforeMount, inject, readonly, watch } from 'vue'
import GridEdit from './edit/GridView.vue'
import FieldView from './edit/FieldView.vue'
import EditView from './edit/EditView.vue'
import AddView from './edit/AddView.vue'
import QueryView from './edit/QueryView.vue'
import ImportView from './edit/ImportView.vue'
import ExportView from './edit/ExportView.vue'
import JsonEditView from '../../util/JsonEditView.vue'
import GridPreviewView from './preview/GridView.vue'
import { ElMessage } from 'element-plus'
// 是否开启预览
const isPreview = ref(false)
const isSet = ref(false)
const isOpenAdd = ref(false)
// 预览界面重新加载变量
const gridPreviewKey = ref(0)
// 配置更改次数
const updateNum = ref(0)
// 判断是否打开添加设置页面
provide('isOpenAdd', isOpenAdd)
import { useRoute } from 'vue-router'
const route = useRoute()
const isShow = ref(false)
// 网格设置统一获取
const api = inject('api')
const apiRequest = api.getApi('FaSysGrid', '85f653190582ddef01eeed6334ceed06')
const codeMode = ref(false)
// 表格属性
let datas = ref({
  tableJson: {},
  fieldJson: [],
  editJson: [],
  addJson: [],
  queryJson: [],
  importJson: [],
  exportJson: []
})

const tabState = ref({
  GRID: true,
  FIELD: false,
  EDIT: false,
  ADD: false,
  QUERY: false,
  IMPORT: false,
  EXPORT: false
})
// 计算配置更改次数
watch(
    datas,
    (newDatas, oldDatas) => {
      // 数据初始化完成开始累计更改次数
      if (oldDatas.tableJson.border !== undefined) {
        updateNum.value++
      }
    },
    { deep: true }
)
onBeforeMount(() => {
  // 初始化数据
  loadData()
  // // 设置cookie 网格id
  // Cookie.setGridId(route.params.id)
})

function loadData() {
  apiRequest.getJson(route.params.id).then((data) => {
    datas.value = data
    isShow.value = true
  })
}

function handleTabClick(tab) {
  // console.log(tab.paneName)
  tabState.value[tab.paneName] = true
}

function edit() {
  const datasClon = JSON.parse(JSON.stringify(datas.value))
  for (const key in datas.value) {
    if (key.includes('Json')) {
      datasClon[key] = JSON.stringify(datas.value[key])
    }
  }
  // 删除selecte类型 add和edit options数组，正式组件通过请求获取
  apiRequest
      .editSet(datasClon)
      .then(() => {
        loadData()
        ElMessage({
          message: '保存成功',
          type: 'success'
        })
      })
      .catch((err) => {
        console.log(err)
      })
}

function initialize() {
  apiRequest
      .initialize(route.params.id)
      .then(() => {
        loadData()
        ElMessage({
          message: '初始化成功',
          type: 'success'
        })
      })
      .catch((err) => {
        console.log(err)
      })
}
const activeName = ref('GRID')
</script>
<style scoped>
.SetGridEdit {
  /* border-right: 1px solid var(--el-border-color); */
}
.zindex11 {
  z-index: 11;
}
.Preview {
  /* position: relative;
  height: 100%;
  display: flex;
  flex-direction: column; */
}
.float-button-set {
  position: absolute; /* 使按钮保持固定位置 */
  top: -5px;
  font-size: 20px;
}
.refresh-button {
  position: absolute; /* 使按钮保持固定位置 */
  top: -5px;
  left: 50px;
  font-size: 20px;
}
.refresh-button :hover {
  cursor: pointer;
}
.float-button {
  position: absolute; /* 使按钮保持固定位置 */
  top: -5px;
  right: -5px;
  font-size: 20px;
}
.float-button :hover {
  cursor: pointer;
}
.float-button-set :hover {
  cursor: pointer;
}
:deep(.json800px .jsoneditor-vue) {
  height: 75vh;
}
:deep(.jsoneditor-vue) {
  height: 300px;
}
</style>
